<template>
	<view class="device-detail-page">
		<view class="page-scroll">
			<!-- 概览卡 -->
			<view class="card overview-card">
				<view class="overview-row">
					<view class="left">
						<text class="label" style="margin-right: 10rpx;">设备ID</text>
						<text class="value id">{{ device.deviceId }}</text>
					</view>
					<!-- 	<view class="right">
						<text class="small-label">信号</text>
						<view class="signal">
							<view class="signal-bars" :class="'level-' + signalLevel" aria-hidden="true">
								<view class="bar b1"></view>
								<view class="bar b2"></view>
								<view class="bar b3"></view>
								<view class="bar b4"></view>
							</view>

							<text class="signal-text">{{ device.signal || '强'}}</text>
						</view>
					</view> -->
				</view>

				<view class="overview-stats">
					<view class="stat">
						<text class="stat-value">{{ device.sell_time || '0D'}}</text>
						<text class="stat-label">剩余时间</text>
					</view>
					<view class="divider"></view>
					<view class="stat">
						<text class="stat-value">{{ device.sell_l || '0.0L'}}</text>
						<text class="stat-label">剩余流量</text>
					</view>
					<view class="divider"></view>
					<view class="stat">
						<view class="stat-value" style="display: flex;align-items: center;">
							<text class="dot" :class="statusColor[device.deviceState]"></text>
							<text style="background: transparent;"
								:class="statusColor[device.deviceState]">{{deviceState[device.deviceState]}}</text>
						</view>
						<text class="stat-label">设备状态</text>
					</view>
				</view>
			</view>
			<!-- 核心展示（卡片 + 圆形图示） -->
			<!-- 	<view class="card core-card">
				<view class="core-top">
					<view class="device-visual">
						<image src="@/static/logo200.png" class="device-img" mode="aspectFit" />
					</view>
					<view class="core-values">
						<view class="kv">
							<text class="kv-value">{{ res.data.deviceParameterLogJson.dy || '0'}} V</text>
							<text class="kv-label">电压</text>
						</view>
						<view class="kv">
							<text class="kv-value">{{ device.temperature || '0'}} ℃</text>
							<text class="kv-label">温度</text>
						</view>
					</view>
				</view>

				<view class="core-grid">
					<view class="grid-item">
						<text class="grid-label">pw1</text>
						<text class="grid-value">{{ device.pw1 || '暂无'}}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">pw2</text>
						<text class="grid-value">{{ device.pw2 || '暂无'}}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">con1</text>
						<text class="grid-value">{{ device.con1 || '暂无'}}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">con2</text>
						<text class="grid-value">{{ device.con2 || '暂无'}}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">p1</text>
						<text class="grid-value">{{ device.p1 || '暂无'}}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">p2</text>
						<text class="grid-value">{{ device.p2 || '暂无'}}</text>
					</view>
				</view>
			</view> -->

			<view class="car-status-page">
				<!-- 顶部状态 -->
				<view class="status-row">
					<view class="status-item" v-for="(item, index) in statusList" :key="index">
						<text class="title">{{ item.title }}</text>
						<text class="desc">{{ item.desc }}</text>
					</view>
				</view>

				<view class="car-image-box">
					<!-- 顶部压力 -->
					<view class="pressure pressure-top">
						<view>压力</view>
						<view>{{ deviceStateLogJson.p1 || 0 }}bar</view>
					</view>
					<!-- 饮水机图片 -->
					<!-- <image class="car-image" src="@/static/images/yinshuiji.png" mode="widthFix"></image> -->
					<image class="car-image" src="https://zhonghonghaoda.com/profile/device.png" mode="widthFix">
					</image>
					<!-- <image class="car-image" src="http://81.70.47.117/profile/device.png" mode="widthFix"></image> -->
					<!-- 左列数据 -->
					<view class="pressure-col pressure-left">
						<view class="pressure-item">
							<view style="width: 100%;text-align: right;">纯水</view>
							<view>{{ deviceStateLogJson.pw1 || 0 }} L/min</view>
						</view>
						<view class="pressure-item">
							<view>电压</view>
							<view>{{ deviceStateLogJson.dy || 0 }} V</view>
						</view>
						<view class="pressure-item">
							<view>温度</view>
							<view>{{ deviceStateLogJson.temp || 0  }} °</view>
						</view>
						<view class="pressure-item">
							<view>总计</view>
							<view>{{ deviceStateLogJson.pw1_tot || 0}} L</view>
						</view>
					</view>

					<!-- 右列数据 -->
					<view class="pressure-col pressure-right">
						<view class="pressure-item">
							<view style="width: 100%;text-align: left;">浓水</view>
							<view>{{ deviceStateLogJson.con1 || 0 }} L/min</view>
						</view>
						<view class="pressure-item">
							<view>电流</view>
							<view>{{ deviceStateLogJson.dl || 0  }} A</view>
						</view>
						<view class="pressure-item">
							<view>TDS</view>
							<view>{{ deviceStateLogJson.tds1 || 0  }}</view>
						</view>
						<view class="pressure-item">
							<view>总计</view>
							<view>{{ deviceStateLogJson.con1_tot || 0}} L</view>
						</view>
					</view>
				</view>


				<!-- 底部说明 -->
				<!-- 	<view class="pressure-tip">
					胎压参考值：前250kPa | 后250kPa
				</view> -->
			</view>

			<!-- 参数/性能列表 -->
			<view class="card list-card">
				<view class="list-header">
					<text class="lh-title">设备详情</text>
					<!-- <text class="lh-sub">更新时间：{{ device.updateTime }}</text> -->
				</view>

				<view class="param-list">
					<!-- 		<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备ID</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceId }}</text>
						</view>
					</view> -->
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备IMEI</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.imei }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备名称</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceName }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备地址</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceAddr }}</text>
						</view>
					</view>
					<!-- 					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备状态</text>
						</view>
						<view class="param-right">
							<text class="param-value" style="background: #fff;"
								:class="statusColor[device.deviceState]">{{deviceState[device.deviceState]}}</text>
						</view>
					</view> -->

					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备是否绑定</text>
						</view>
						<view class="param-right">
							<text class="param-value" style="color: #ff0000;" v-if="device.isBound == '0'">未绑定</text>
							<text class="param-value" style="color: #00aaff;" v-if="device.isBound == '1'">已绑定</text>
							<text class="param-value" style="color: #cfcfcf;" v-if="device.isBound == '2'">已注销</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 参数/性能列表 -->
			<view class="card list-card">
				<view class="list-header">
					<text class="lh-title">设备性能参数</text>

					<view class="flex" style="align-items: center;">
						<text class="lh-sub">更新时间：{{ device.updateTime }}</text>
						<u-icon name="reload" color="#2979ff" size="28" @click="deviceRefresh(1)"></u-icon>
					</view>
				</view>
				<view class="param-list">
					<block v-for="(row, idx) in device.deviceParameterLogList" :key="idx">
						<view class="param-row" v-if="row.show===true">
							<view class="param-left">
								<text class="param-name">{{ row.name }}</text>
								<text class="param-note">（{{ row.key }}）</text>
							</view>
							<view class="param-right">
								<text class="param-value">{{ row.value }}</text>
							</view>
						</view>
					</block>

				</view>
			</view>

			<!-- 备注 -->
			<view class="card remark-card">
				<text class="remark-title">备注：</text>
				<text class="remark-text">{{ device.remark || '暂无备注'}}</text>
			</view>

			<view class="card" style="display: flex;align-items: center;padding: 30rpx;">
				<view class="cate-item" @click="handleControl(0)" v-if="checkAppleCode(['APPLET_OFF'])">
					<image src="@/static/images/guanji.png" mode=""></image>
					<text class="mt10">关机</text>
				</view>
				<view class="cate-item ml30" @click="handleControl(1)" v-if="checkAppleCode(['APPLET_RESTART'])">
					<image src="@/static/images/chongqi.png" mode=""></image>
					<text class="mt10">重启</text>
				</view>
				<view class="cate-item ml30" @click="handleControl(2)" v-if="checkAppleCode(['APPLET_UPDATE'])">
					<image src="@/static/images/shengji.png" mode=""></image>
					<text class="mt10">远程升级</text>
				</view>
			</view>
			<view style="height: 120rpx;"></view>
			<view>
				<!-- 底部操作（悬浮） -->
				<view class="bottom-actions">
					<!-- <button class="btn-outline" @click="editDevice">修改设备</button> -->
					<button class="btn-outline btn-danger" @click="editDeviceParams">修改设备参数</button>
					<button class="btn-outline" style="background: #e45656;color: #fff;border:none;"
						@click="confirmDelete(device)">删除设备</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceDetailApi,
		deviceDeleteApi,
		deviceControlApi,
		controlListApi,
		deviceRefreshApi
	} from '@/api/index.js';
	import {
		parseJSONSafe
	} from '@/utils/jsonUtil';
	import uploadJson from './upload.json';
	import {
		checkPermi,
		checkRole,
		checkAppleCode
	} from "@/utils/permission"; // 权限判断函数
	export default {
		data() {
			return {
				list: [{
						name: 'file-text',
						title: '设备参数日志对比'
					},
					{
						name: 'file-text',
						title: '对比设备水位日志'
					},
					{
						name: 'file-text',
						title: '对比设备报警日志'
					},
					{
						name: 'edit-pen',
						title: '修改设备参数'
					},
				],
				deviceState: {
					0: '离线',
					1: '在线',
					2: '缺水',
					3: '异常',
				},
				statusColor: {
					0: 'red',
					1: 'green',
					2: 'orange',
					3: 'red',
				},

				device: {
					deviceId: 'DEV-20230913-001',
					signal: '强',
					remainTime: '12天 05:23',
					remainFlow: '1.2GB',
					status: '正常',
					statusColor: 'green', // green/red/orange styles
					remark: '设备部署于主楼南侧机房，长期稳定运行。',
					voltage: 12.6,
					temperature: 36.5,
					pw1: '1.23',
					pw2: '1.21',
					con1: 'OK',
					con2: 'OK',
					p1: '0.98',
					p2: '1.02',
					updateTime: '2025-09-13 21:36'
				},
				deviceId: "",
				statusList: [{
						title: '制水',
						desc: '进行中'
					},
					{
						title: '冲洗',
						desc: '进行中'
					},
					{
						title: '水满',
						desc: '进行中'
					},
					{
						title: '缺水',
						desc: '进行中'
					}
				],
				tirePressure: {
					frontLeft: 270,
					frontRight: 265,
					rearLeft: 267,
					rearRight: 257
				},
				hideParams: ['ls', 'ld', 'tds_ys', 'sell time', 'sell_l', 'ac_dy', 'ac_dl', 'ac_gl', 'ac_dn'],
				timer: null,
				deviceStateLogJson: {}
			};
		},
		computed: {
			signalLevel() {
				// 将 device.signal 映射为 0-4 等级（可根据你的字段自定义）
				const s = (this.device && this.device.signal) ? String(this.device.signal).toLowerCase() : '';
				// 常用映射：强->4, 中->3, 弱->2, 无->0
				if (s.indexOf('强') !== -1 || s.indexOf('4') !== -1) return 4;
				if (s.indexOf('中') !== -1 || s.indexOf('3') !== -1) return 3;
				if (s.indexOf('弱') !== -1 || s.indexOf('2') !== -1) return 2;
				if (s.indexOf('1') !== -1) return 1;
				// return 0;
				return 4;
			},
			signalIcon() {
				// 简单按 signal 字段返回图标，可替换为真实图片
				if (this.device.signal === '强') return '/static/icons/signal-4.png';
				if (this.device.signal === '中') return '/static/icons/signal-3.png';
				if (this.device.signal === '弱') return '/static/icons/signal-2.png';
				return '/static/icons/signal-0.png';
			}
		},
		mounted() {

		},
		onLoad(options) {
			console.log(options, 'options');
			this.controlList();
			if (options.deviceId) {
				this.deviceId = options.deviceId;

			}
		},
		async onShow() {
			try {
				// 如果已有定时器，先清掉（防止重复启动）
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}

				// 页面显示时立即调用一次
				await this.deviceDetail(this.deviceId);

				// 页面加载后只执行一次 handleControl
				// await this.deviceRefresh(0);

				// 启动轮询，每5秒执行一次
				// === 只轮询三次 ===
				let count = 0;
				this.timer = setInterval(() => {
					this.deviceDetail(this.deviceId);
					count++;
					if (count >= 2) {
						clearInterval(this.timer);
						this.timer = null;
						console.log("轮询完成（三次）");
					}
				}, 5000);

			} catch (err) {
				console.error('onShow 初始化失败：', err);
			}
		},

		onHide() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},

		methods: {
			checkPermi,
			checkRole,
			checkAppleCode,
			async controlList() {
				const res = await controlListApi();
				// console.log(res, 'list');
				if (res.code === 200) {
					if (res.rows && res.rows.length > 0) {
						const list = res.rows.map(item => item.appletCode);
						console.log(list, 'list--list');
						uni.setStorageSync('appletCodeList', [])
						uni.setStorageSync('appletCodeList', list)
					} else {
						uni.setStorageSync('appletCodeList', [])
					}
				} else {
					uni.setStorageSync('appletCodeList', [])
				}
			},
			// 设备刷新
			async deviceRefresh(type) {
				const res = await deviceRefreshApi({
					imei: this.device.imei,
				})
				if (res.code === 200) {
					if (!type) return
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					let count = 0;
					this.timer = setInterval(() => {
						this.deviceDetail(this.deviceId);
						count++;
						if (count >= 3) {
							clearInterval(this.timer);
							this.timer = null;
							console.log("轮询完成（三次）");
						}
					}, 5000);
				}
			},
			// 处理操作
			async handleControl(type) {
				console.log(type, 'type');
				const res = await deviceControlApi({
					imei: this.device.imei,
					deviceState: type
				});
				console.log(res, 'res--res');
				if (res.code === 200) {
					if (type === 4) return
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			// 日志
			toLog(type) {
				console.log(type, 'type');
				uni.navigateTo({
					url: '/pages/log/log?type=' + type + '&deviceId=' + this.deviceId
				})
			},
			// 设备详情
			async deviceDetail(deviceId) {
				const res = await deviceDetailApi(deviceId);
				console.log(res, 'res-设备详情');
				if (res.code === 200) {
					const deviceStateLog = JSON.parse(res.data.deviceStateLog)
					this.deviceStateLogJson = deviceStateLog;
					// return
					if (res.data.deviceParameterLog) {
						const parsed = parseJSONSafe(res.data.deviceParameterLog)
						// console.log(parsed, '✅ 转成真正JSON对象')
						res.data.deviceParameterLogJson = parsed || res.data.deviceParameterLog

						// 把对象转换为数组并加上 name（从 uploadJson 映射），方便前端展示
						if (typeof res.data.deviceParameterLogJson !== 'object' || !res.data.deviceParameterLogJson) {
							res.data.deviceParameterLogList = []
						} else {
							// try {
							// 	const isShowParams = this.checkAppleCode('APPLET_PARAMS');
							// 	console.log(isShowParams, 'isShowParams');
							// 	if (isShowParams === false) {
							// 		console.log(this.hideParams);  //值为hideParams: ['ls', 'ld', 'tds_ys', 'sell time', 'sell_l', 'ac_dy', 'ac_dl', 'ac_gl', 'ac_dn'],

							// 	}
							// 	const obj = res.data.deviceParameterLogJson
							// 	res.data.deviceParameterLogList = Object.keys(obj)
							// 		// ✅ 过滤掉 uploadJson 中不存在的 key
							// 		.filter(key => uploadJson && uploadJson[key])
							// 		.map(key => ({
							// 			key,
							// 			value: obj[key],
							// 			name: uploadJson[key].name || key,
							// 			show: true
							// 		}))
							// } catch (e) {
							// 	res.data.deviceParameterLogList = []
							// }
							try {
								const isShowParams = this.checkAppleCode(['APPLET_PARAMS']);
								console.log(isShowParams, 'isShowParams');

								const obj = res.data.deviceParameterLogJson;
								const hideParams = this.hideParams || [];

								res.data.deviceParameterLogList = Object.keys(obj)
									// ✅ 过滤掉 uploadJson 中不存在的 key
									.filter(key => uploadJson && uploadJson[key])
									.map(key => {
										let show = true;
										// 👇 当 isShowParams === false 时，只隐藏 hideParams 里的 key
										if (isShowParams === false && hideParams.includes(key)) {
											show = false;
										}
										return {
											key,
											value: obj[key],
											name: uploadJson[key].name || key,
											show
										};
									});

							} catch (e) {
								res.data.deviceParameterLogList = [];
							}

						}
						// console.log(res.data.deviceParameterLogList, '历史参数');
						// console.log(res.data.deviceParameterLogJson, 'json');
					}
					this.device = res.data;
					console.log(this.deviceStateLogJson, 'this.deviceStateLogJson');

					this.statusList = [{
							title: '制水',
							desc: this.deviceStateLogJson.zs_state === 1 ? '进行中' : this.deviceStateLogJson
								.zs_state === 0 ? '已关闭' : ''
						},
						{
							title: '冲洗',
							desc: this.deviceStateLogJson.cs_state === 1 ? '进行中' : this.deviceStateLogJson
								.cs_state === 0 ? '已关闭' : ''
						},
						{
							title: '水满',
							desc: this.deviceStateLogJson.sm_state === 1 ? '进行中' : this.deviceStateLogJson
								.sm_state === 0 ? '已关闭' : ''
						},
						{
							title: '缺水',
							desc: this.deviceStateLogJson.qs_state === 1 ? '进行中' : this.deviceStateLogJson
								.qs_state === 0 ? '已关闭' : ''
						}
					]
				}
			},
			goBack() {
				uni.navigateBack();
			},
			openMore() {
				// 可打开更多操作
				console.log('open more');
			},
			fetchDevice() {
				// TODO: 替换为真实接口
				// const res = await getDeviceApi({ id: this.$route.params.id })
				// this.device = res.data
			},
			editDevice() {
				// 跳到编辑页面或弹窗
				uni.navigateTo({
					url: `/pages/myDevices/addDevices?deviceId=${this.device.deviceId}`
				});
			},
			editDeviceParams() {
				// 跳到编辑页面或弹窗
				uni.navigateTo({
					url: `/pages/myDevices/edit?deviceId=${this.device.deviceId}&imei=${this.device.imei}`
				});
			},
			// 删除设备
			confirmDelete(device) {
				uni.showModal({
					title: '删除设备',
					content: `确认删除设备 ${ device.deviceId } 吗？此操作无法撤销。`,
					success: (res) => {
						if (res.confirm) {
							this.deleteDeviceFun()
						}
					}
				})
			},
			deleteDeviceFun() {
				// TODO: 调用删除接口
				deviceDeleteApi(this.device.deviceId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 800);
					}
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 页面整体 */
	.device-detail-page {
		min-height: 100vh;
		background: #f6f7f8;
		position: relative;
		color: #111;
		padding-bottom: 110rpx;
	}

	/* 顶部 */
	.top-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		justify-content: space-between;
		background: transparent;
	}

	.back {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		font-size: 32rpx;
		color: #111;
		font-weight: 600;
	}

	.more {
		font-size: 28rpx;
		color: #999;
	}

	/* 通用卡片样式 */
	.card {
		background: #fff;
		margin: 18rpx 16rpx;
		border-radius: 16rpx;
		padding: 18rpx;
		box-shadow: 0 10rpx 30rpx rgba(20, 30, 50, 0.04);

		.cate-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 30rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	/* 概览卡 */
	.overview-card .overview-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.overview-card .label {
		color: #888;
		font-size: 26rpx;
	}

	.overview-card .id {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	}

	.overview-card .right {
		text-align: right;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.signal-icon {
		width: 36rpx;
		height: 24rpx;
	}

	.signal-text {
		font-size: 24rpx;
		color: #666;
	}

	.overview-stats {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.stat {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
	}

	.stat-label {
		display: block;
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #888;
	}

	.divider {
		width: 1rpx;
		height: 56rpx;
		background: #f0f0f0;
		margin: 0 8rpx;
	}

	/* 核心卡 */
	.core-card {
		padding-top: 20rpx;
	}

	.core-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.device-visual {
		width: 38%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.device-img {
		width: 110rpx;
		height: 110rpx;
	}

	.core-values {
		width: 55%;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.kv {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kv-value {
		font-size: 30rpx;
		color: #0081ff;
		font-weight: 700;
	}

	.kv-label {
		font-size: 22rpx;
		color: #888;
	}

	.core-grid {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.grid-item {
		background: #f9fafb;
		flex: 0 0 calc(33.333% - 8rpx);
		padding: 12rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.grid-label {
		display: block;
		color: #7b8790;
		font-size: 22rpx;
	}

	.grid-value {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	/* 参数列表卡 */
	.list-card .list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.lh-title {
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	.lh-sub {
		font-size: 22rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.param-list {
		margin-top: 10rpx;
	}

	.param-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f1f3f5;
	}

	.param-name {
		font-size: 26rpx;
		color: #666;
	}

	.param-note {
		font-size: 22rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.param-value {
		font-size: 26rpx;
		color: #222;
		font-weight: 600;
	}

	/* 备注卡 */
	.remark-card {
		margin-top: 12rpx;
	}

	.remark-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.remark-text {
		font-size: 24rpx;
		color: #444;
		line-height: 34rpx;
	}

	/* 底部按钮 */
	.bottom-actions {
		position: fixed;
		left: 0rpx;
		right: 16rpx;
		bottom: 0rpx;
		display: flex;
		gap: 16rpx;
		justify-content: center;
		align-items: center;
		background: #fff;
		width: 100%;
		// border: 1rpx solid #000;
		z-index: 9999;
		padding: 20rpx 20rpx 58rpx 20rpx;
		// padding-bottom: 58rpx;
	}

	.btn-outline {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: #fff;
		border: 1rpx solid #e6e6e6;
		color: #666;
		font-size: 26rpx;

	}

	.btn-danger {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: linear-gradient(90deg, #00aaff, #0081ff);
		color: #fff;
		font-weight: 600;
		font-size: 26rpx;
		border: none;
	}

	/* 弹窗内样式 */
	.popup-delete {
		padding: 28rpx;
	}

	.popup-title {
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.popup-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.popup-actions {
		display: flex;
		gap: 12rpx;
		justify-content: flex-end;
	}

	/* CSS 信号条 */
	.signal-bars {
		display: flex;
		align-items: flex-end;
		gap: 6rpx;
		height: 28rpx;
		/* 总高度，根据需要调整 */
		padding-left: 6rpx;
	}

	/* 每条的基础样式 */
	.signal-bars .bar {
		width: 6rpx;
		background: #e6edf3;
		/* 未激活颜色 */
		border-radius: 3rpx;
		transition: background-color 180ms ease, transform 180ms ease;
		transform-origin: bottom center;
		opacity: 0.95;
	}

	/* 各列高度（从左到右逐渐增高） */
	.signal-bars .b1 {
		height: 8rpx;
	}

	.signal-bars .b2 {
		height: 14rpx;
	}

	.signal-bars .b3 {
		height: 20rpx;
	}

	.signal-bars .b4 {
		height: 26rpx;
	}

	/* 激活颜色（主色） */
	.signal-bars.level-1 .b1,
	.signal-bars.level-2 .b1,
	.signal-bars.level-3 .b1,
	.signal-bars.level-4 .b1 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-2 .b2,
	.signal-bars.level-3 .b2,
	.signal-bars.level-4 .b2 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-3 .b3,
	.signal-bars.level-4 .b3 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-4 .b4 {
		background: #0081ff;
		transform: translateY(0);
	}

	/* 非激活时稍微缩小，增加层次 */
	.signal-bars .bar {
		transform: translateY(6rpx) scaleY(0.92);
	}

	.signal-bars.level-1 .b1 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-2 .b1,
	.signal-bars.level-2 .b2 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-3 .b1,
	.signal-bars.level-3 .b2,
	.signal-bars.level-3 .b3 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-4 .b1,
	.signal-bars.level-4 .b2,
	.signal-bars.level-4 .b3,
	.signal-bars.level-4 .b4 {
		transform: translateY(0) scaleY(1);
	}

	/* 可选：调整在小屏上显示更易读 */
	@media (min-width: 0px) {
		.signal-bars {
			gap: 8rpx;
		}

		.signal-bars .bar {
			width: 7rpx;
			border-radius: 3rpx;
		}
	}

	.green {
		background: #29c26a;
		color: #29c26a;
	}

	.red {
		background: #ff5a5a;
		color: #ff5a5a;
	}

	.orange {
		background: #ff9a3a;
		color: #ff9a3a;
	}

	.dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}


	.car-status-page {

		background: #fff;
		margin: 18rpx 16rpx;
		border-radius: 16rpx;
		// padding: 18rpx;
		box-shadow: 0 10rpx 30rpx rgba(20, 30, 50, 0.04);

		padding: 40rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 顶部状态条 */
	.status-row {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 0;
		border-radius: 16rpx;
		margin-bottom: 100rpx;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;

		.title {
			font-size: 26rpx;
			color: #333;
		}

		.desc {
			font-size: 24rpx;
			color: #8c8c8c;
			margin-top: 6rpx;
		}

		/* 分割线（竖线） */
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 36rpx;
			background-color: #e5e5e5;
		}

		&:last-child::after {
			display: none;
		}
	}

	.car-image-box {
		position: relative;
		width: 450rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.car-image {
		width: 80%;
		border-radius: 16rpx;
		display: block;
	}

	/* 顶部压力 */
	.pressure-top {
		position: absolute;
		top: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		line-height: 1.6;
	}

	/* 左右列容器 */
	.pressure-col {
		position: absolute;
		top: 10%;
		bottom: 10%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		font-size: 30rpx;
		color: #333;

	}

	.pressure-left {
		left: -120rpx;
		align-items: flex-end;
	}

	.pressure-right {
		right: -120rpx;
		align-items: flex-start;
	}

	/* 单个项样式，与压力样式一致 */
	.pressure-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.6;
		font-weight: 600;

		view:first-child {
			color: #333;
			font-weight: 600;
		}

		view:last-child {
			color: #333;
			font-size: 30rpx;
		}
	}



	/* 底部胎压说明 */
	.pressure-tip {
		text-align: center;
		color: #999;
		font-size: 32rpx;
		margin-top: 30rpx;
	}
</style>